<template>
  <div class="hot-complate">
    <div class="hot-complate-wrapper">
      <div class="hot-complate-title">
        <h2>热门模板</h2>
        <a class="all-complate" href="">查看全部模板</a>
      </div>
      <!-- <div class="wrapper"> -->
      <ul class="hot-complate-list">
        <li class="hot-item">
          <router-link to="/">
            <div class="hot-img">
              <img src="https://wj.qq.com/data_temp/template_source/img/medical.png" />
            </div>
            <div>身体健康状况调查</div>
          </router-link>
        </li>
        <li class="hot-item left">
          <router-link to="/">
            <div class="hot-img">
              <img src="https://wj.qq.com/data_temp/template_source/img/chat.png" />
            </div>
            <div>数码家电产品满意度</div>
          </router-link>
        </li>
        <li class="hot-item left">
          <router-link to="/">
            <div class="hot-img">
              <img src="https://wj.qq.com/data_temp/template_source/img/tv.png" />
            </div>
            <div>身体健康状况调查</div>
          </router-link>
        </li>
        <li class="hot-item left">
          <router-link to="/">
            <div class="hot-img">
              <img src="https://wj.qq.com/data_temp/template_source/img/talent.png" />
            </div>
            <div>国标标准智商测试</div>
          </router-link>
        </li>
        <li class="hot-item left">
          <router-link to="/">
            <div class="hot-img">
              <img src="https://wj.qq.com/data_temp/template_source/img/coffee.png" />
            </div>
            <div>团购网站用户满意度</div>
          </router-link>
        </li>
        <li class="hot-item left">
          <router-link to="/">
            <div class="hot-img">
              <img src="https://wj.qq.com/data_temp/template_source/img/game.png" />
            </div>
            <div>pc端游、页游满意度</div>
          </router-link>
        </li>
      </ul>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.hot-complate-wrapper {
  width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 20px 30px 20px;
}
.all-complate {
  color: #58a6e7;
}
.hot-img {
  width: 138px;
  height: 138px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
  line-height: 138px;
}
h2 {
  display: inline-block;
}
.hot-complate-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper {
  display: flex;
  // justify-content: space-between;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.hot-item {
  margin-top: 13px;
  cursor: pointer;
  display: flex;
}

.hot-complate-list {
  display: flex;
  justify-content: space-between;
  align-content: center;
  text-align: center;
}
img {
  vertical-align: middle;
}
</style>
